<template>
	<view>
		<u-navbar
			:autoBack="true"
			leftIconColor="rgba(255, 255, 255, 1)"
			:placeholder="false"
			bgColor="rgba(243, 243, 243, 0)"
		>
		</u-navbar>
		<headerVue :cur="datas"></headerVue>
		<view class="tabs">
			<u-tabs :current="tab_id" :scrollable="false" :list="list_tab" @click="click" lineColor="rgba(0, 0, 0, 1)"
				activeStyle="color:rgba(0, 0, 0, 1)" lineWidth="60rpx"></u-tabs>
			<u-line margin="-9rpx" :hairline="false"></u-line>
		</view>

		<view v-if="tab_id==0" class="v_if">
			<!-- <u--image class="img" width="349rpx" height="138rpx"
				src="https://img.js.design/assets/img/67188c5ae124ab54d3fe5f56.png"></u--image>
			<view style="margin-left: 22.3rpx; margin-right: 22.3rpx;">
				<u-parse class="parse" :content="datas.content"></u-parse>
				<u--text color="rgba(212, 48, 48, 1)" iconStyle="font-size: 18px;" align="center" text="查看更多>>"
					@click="judgment"></u--text>
				<u-line :hairline="false"></u-line>
			</view> -->
		</view>
		<!-- 人物关系 -->
		<view v-else-if="tab_id==1" class="v_if">
			<u--image class="img" width="349rpx" height="138rpx"
				src="https://img.js.design/assets/img/67177576c861649a3c721603.png"></u--image>
			<view v-if="list.length==0">
				<u-loadmore loadmoreText="没有更多了" lineColor="#b7b7b7" dashed line />
			</view>
			<view>
				<u-popup :show="show" @close="close" customStyle="width: 606rpx; height: 790rpx;" mode="center"
					:closeable="true" round="20">
					<view class="popu">
						<text>关系介绍</text><br>
						<image class="popu_img" :src="oss_host+rbc.image"></image>
						<view class="popu_tex">
							<text>{{rbc.name}}</text><br>
							<text class="text1">{{rbc.guanxi}}</text>
						</view>

					</view>
					<view class="popu_text">
						<view style="margin-bottom: 37rpx;">亲友介绍</view>
						<view v-if="rbc.des==''">
							<u-loadmore loadmoreText="没有更多了" lineColor="#b7b7b7" dashed line />
						</view>
						<u--text :text="rbc.des"></u--text>
					</view>

				</u-popup>
			</view>
			<view style="margin-bottom: 76.7rpx;">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="character(listItem)">
						<image class="v_if_img" :src="oss_host+listItem.image"></image>
						<text class="grid-text V_if_text0">{{listItem.name}}</text>
						<text class="grid-text V_if_text1">{{listItem.guanxi}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 相关视频 -->
		<view v-else-if="tab_id==2" class="v_if">
			<u--image class="img" width="349rpx" height="138rpx"
				:src="oss_host+'/uploads/20241128/bb6b2e9c5404aa9b2a890e9f61116f7c.png'"></u--image>
			<view v-if="video.length==0">
				<u-loadmore loadmoreText="没有更多了" lineColor="#b7b7b7" dashed line />
			</view>
			<view>
				<u-popup :show="show1" @close="close" mode="center" :closeable="true">
					<video id="myVideo" :poster="oss_host+video_url+video_cover" :src="oss_host+video_url"
						controls="true" object-fit="contain" autoplay="true"></video>
				</u-popup>
			</view>
			<view style="margin-bottom: 76.7rpx;">
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(listItem,listIndex) in video" :key="listIndex" @click="video1(listItem)">
						<image class="v_if_video" :src="oss_host+listItem+video_cover"></image>

					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 人物相册 -->
		<view v-else-if="tab_id==3" class="v_if">
			<u--image class="img" width="349rpx" height="138rpx"
				:src="oss_host+'/uploads/20241128/2a2301194430f544dc101da7c07a7168.png'"></u--image>
			<view v-if="urls2.length==0">
				<u-loadmore loadmoreText="没有更多了" lineColor="#b7b7b7" dashed line />
			</view>
			<u-album :urls="urls2" multipleSize="219rpx" :maxCount="albumWidth"></u-album>
		</view>
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop" top="300"></u-back-top>
		</view>
		<view style="height: 100px;"></view>
	</view>

</template>

<script>
	import {
		api_host,
		video_cover,
		oss_host
	} from "../../utils/appInfo.js"
	import headerVue from './header.vue'
	export default {
		components: {
			headerVue
		},
		data() {
			return {
				scrollTop: 0,
				oss_host: oss_host,
				video_cover: video_cover,
				api_host: api_host,
				datas: {},
				_id: 0,
				show: false,
				show1: false,
				tab_id: 0,
				list_tab: [{
					name: '人物简介'
				}, {
					name: '人物关系'
				}, {
					name: '相关视频'
				}, {
					name: '人物相册'
				}],
				u_guanxi: [],
				//人物关系
				list: [],
				rbc: {
					image: "",
					name: "",
					guanxi: "",
					des: ""
				},
				video_url: "",
				video: [],
				//相册
				albumWidth: 0,
				urls2: [],
				content: ''
			}
		},
		onLoad(res) {
			this.tab_id = res.tab_id
			this._id = res.id
			this.api.getIndex({
				id: this._id
			}).then(res => {
				this.datas = res.data
				uni.setNavigationBarTitle({
					title: this.datas.name
				})
			})
			this.api.getGuanxi({
				id: this._id
			}).then(res => {
				this.list = res.data
			})
			this.api.getVideo({
				id: this._id
			}).then(res => {
				this.video = res.data
			})
			this.api.getImage({
				id: this._id
			}).then(res => {
				this.urls2 = res.data
				this.albumWidth = res.data.length
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if(this.tab_id==0){
				uni.navigateTo({
						url:"./introduction?id="+this._id
					})
			}
		    // // 下滑到底部时触发
		    // uni.navigateTo({
		    //   url: '/pages/next/next' // 跳转到下一页面
		    // });
		},
		methods: {
			click(item) {
				this.tab_id = item.index
				if(this.tab_id==0){
					uni.navigateTo({
							url:"./introduction?id="+this._id
						})
				}
			},
			close() {
				this.show = false
				this.show1 = false
			},
			character(rbc) {
				this.rbc.image = rbc.image
				this.rbc.name = rbc.name
				this.rbc.guanxi = rbc.guanxi
				this.rbc.des = rbc.des
				this.show = true
			},
			video1(ur) {
				this.show1 = true
				this.video_url = ur
			},
			judgment() {
				uni.navigateTo({
					url: "./introduction?id=" + this._id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		height: 50rpx;

	}

	.tabs {
		margin-top: 650rpx;
		margin-left: 33rpx;
		margin-right: 33rpx;
		background-color: rgba(255, 255, 255, 1);
	}

	.v_if {
		margin-left: 30rpx;
		margin-right: 30rpx;
		// margin-top: 52.6rpx;
		.img {
			margin-top: 4rpx;
			margin-left: 191rpx;
			margin-right: 191rpx;
			margin-bottom: 5rpx;
		}
		.parse {
			line-height: 50rpx;
			/* 根据实际字体大小设置 */
			max-height: 300rpx;
			/* 行高的3倍，即显示3行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 当文本超过指定行数时显示省略号 */
			display: -webkit-box;
			/* 弹性盒子模型显示 */
			-webkit-line-clamp: 6;
			/* 限制在3行 */
			-webkit-box-orient: vertical;
		}

		.v_if_index_video {
			margin-top: 30rpx;
			width: 652.3rpx;
			margin-left: 22.3rpx;
			margin-right: 22.3rpx;
		}

		.popu {
			margin-top: 50rpx;
			margin-left: 65rpx;
			margin-right: 65rpx;

			.popu_img {
				float: left;
				margin-top: 20rpx;
				margin-left: -15rpx;
				width: 215rpx;
				height: 215rpx;
				border-radius: 40px;
			}

			.popu_tex {
				float: left;
				margin-top: 40rpx;
				margin-left: 54rpx;
				line-height: 80rpx;

				.text1 {
					color: rgba(153, 153, 153, 1);
				}
			}
		}

		.popu_text {
			margin-top: 37rpx;
			margin-left: 65rpx;
			margin-right: 65rpx;
			font-size: 35rpx;
		}

		.v_if_img {
			border-radius: 50px;
			width: 112rpx;
			height: 112rpx;
		}

		.v_if_video {
			margin-bottom: 17.4rpx;
			width: 220rpx;
			height: 226rpx;
			opacity: 1;
			border-radius: 10px;
		}

		.V_if_text0 {
			margin-top: 28rpx;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 1);
		}

		.V_if_text1 {
			margin-bottom: 24.4rpx;
			font-size: 24.4rpx;
			color: rgba(153, 153, 153, 1);
		}
	}
</style>